<template>
  <el-row :gutter="20">
      <el-col :span="6">
      <el-form-item label="单据编号：" >
          <el-input v-model="form.number" placeholder="请输入单据编号" />
      </el-form-item>
      </el-col>
      <el-col :span="6">
      <el-form-item label="商品信息：" >
          <el-input v-model="form.keywords" placeholder="请输入条码、名称、规格、型号查询" />
      </el-form-item>
      </el-col>
      <el-col :span="6">
      <el-form-item label="单据日期：" >
          <div class="block">
              <el-date-picker
              style="width:90%"
              v-model="value2"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD hh:mm:ss"
              />
          </div>
      </el-form-item>
      </el-col>
      <el-col :span="6">
      <el-form-item>
          <el-button type="primary" @click="getTableData()">查询</el-button>
          <el-button @click="resetQuery()" >重置</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-dropdown >
          <span v-if="queryShow==false"  @click="changeQueryShow(true)" class="el-dropdown-link">
              展开<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <span v-else @click="changeQueryShow(false)" class="el-dropdown-link">
              收起<el-icon class="el-icon--right"><arrow-up /></el-icon>
          </span>
          </el-dropdown>
      </el-form-item>
      </el-col>
  </el-row>
  
  <div v-show="queryShow">
      <el-row :gutter="20">
          <el-col :span="6">
          <el-form-item label="供应商：">
              <el-select v-model="form.organ_id" placeholder="请选择" clearable>
                <el-option v-for="item in supplierList" :key="item.customerid" :label="item.customer"
                :value="item.customerid" />
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="仓库名称：">
              <el-select v-model="form.depot_id" placeholder="请选择" clearable>
              <el-option v-for="item in warehouseList" :key="item.depot_id" :label="item.depot_name"
              :value="item.depot_id" />
              </el-select>
          </el-form-item>
          </el-col>
      </el-row>
</div>

  <el-button type="primary" @click="AddProductInfo()">新增</el-button>
  <el-button @click="DeleteRange">批量删除</el-button>
  <el-button @click="DeleteRange">审核</el-button>
  <el-button @click="DeleteRange">反审核</el-button>
  <el-button @click="ExportProjectExcel">导出</el-button>
  <!--列设置-->
  <el-popover placement="right" width="300px" trigger="click">
  <template #reference>
    <el-button style="margin-right: 16px">列设置</el-button>
  </template>
  <table>
    <tbody>
      <tr>
        <td><el-checkbox label="供应商" v-model="Listheading.c1"/></td>
        <td><el-checkbox label="单据编号" v-model="Listheading.c2"/></td>
        <td><el-checkbox label="关联单据" v-model="Listheading.c3"/></td>
      </tr>
      <tr>
        <td><el-checkbox label="商品信息" v-model="Listheading.c4"/></td>
        <td><el-checkbox label="单据日期" v-model="Listheading.c5"/></td>
        <td><el-checkbox label="操作员" v-model="Listheading.c6"/></td>
      </tr>
      <tr>
        <td><el-checkbox label="数量" v-model="Listheading.c7"/></td>
        <td><el-checkbox label="金额合计" v-model="Listheading.c8"/></td>
        <td><el-checkbox label="备注" v-model="Listheading.c9"/></td>
      </tr>
      <tr>
        <td><el-checkbox label="状态" v-model="Listheading.c10"/></td>
      </tr>
    </tbody>
  </table>
  <div>
  恢复默认列配置：<el-link type="primary" @click="ResetCheckbox">恢复默认</el-link>
  </div>
</el-popover>

<!--列表显示-->
<el-table border height="550" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="date" label="操作" width="180px">
          <template #default="scope" >
            <el-button type="text" @click="handleDelete(scope.row)">查看</el-button>
            <el-button type="text" @click="handleDelete(scope.row.productid)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">复制</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
      </el-table-column>
      <el-table-column v-if="Listheading.c1" prop="organ_name" label="供应商" />
      <el-table-column v-if="Listheading.c2" prop="number" label="单据编号" />
      <el-table-column v-if="Listheading.c3" prop="link_number" label="关联单据" />
      <el-table-column v-if="Listheading.c4" prop="product_info" label="商品信息" />
      <el-table-column v-if="Listheading.c5" prop="create_time" label="单据日期" />
      <el-table-column v-if="Listheading.c6" prop="username" label="操作员" />
      <el-table-column v-if="Listheading.c7" prop="total_num" label="数量" />
      <el-table-column v-if="Listheading.c8" prop="total_price" label="金额" />
      <el-table-column v-if="Listheading.c9" prop="remark" label="备注" />
      <el-table-column v-if="Listheading.c10" prop="statusstr" label="状态" >
        <template #default="scope">
          <el-tag v-if="scope.row.statusstr=='未审核'" type="danger">{{scope.row.statusstr}}</el-tag>
          <el-tag v-else type="success">{{scope.row.statusstr}}</el-tag>
        </template>
      </el-table-column>
</el-table>

  <!--分页-->
  <div style="float:right">
      <el-pagination
      v-model:current-page="form.pageindex"
      v-model:page-size="form.pagesize"
      :page-sizes="[10,20,30]"
      layout="total, prev, pager, next, sizes"
      :total="pageShow.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      />
      </div>

  <el-dialog style="width: 80%;height:70%" v-model="dialogTableVisible" title="单据信息" destroy-on-close width="800">
    <AddOutboundView v-if="dosmthing==1" ></AddOutboundView>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive,ref,onMounted} from 'vue'
import {ElMessage,ElMessageBox} from 'element-plus'
import AddOutboundView from './AddOutboundView.vue'
import { GetOtherOutShow} from '@/api/otherwarehousing/index'
import { type OtherOutShowQuery} from '@/api/otherwarehousing/type'
import {GetSupplierList,  GetWarehouseList } from '@/api/Sales/index'

//查询单据日期
const value2 = ref('')
//导出
const ExportProjectExcel=()=>{
location.href='http://localhost:5184/ProductData/ExportExcel'
}


//列设置绑定字段
const Listheading=reactive({
c1:true,
c2:true,
c3:false,
c4:true,
c5:true,
c6:true,
c7:false,
c8:true,
c9:false,
c10:true
})
//列设置恢复默认
const ResetCheckbox=()=>{
Listheading.c1=true
Listheading.c2=true
Listheading.c3=false
Listheading.c4=true
Listheading.c5=true
Listheading.c6=true
Listheading.c7=true
Listheading.c8=true
Listheading.c9=false
Listheading.c10=true
}

//控制弹框
const dialogTableVisible=ref(false)
const dosmthing=ref(1)
const AddProductInfo=()=>{
dialogTableVisible.value=true
dosmthing.value=1
}
//仓库列表
const warehouseList: any = ref([])
const getWarehouseList = async () => {
  await GetWarehouseList().then(res => {
      warehouseList.value = res.data;
  })
}
//供应商列表
const supplierList: any = ref([])
const getSupplierList = async () => {
  await GetSupplierList().then(res => {
      supplierList.value = res.data;
  })
}
const queryShow = ref(false)
//查询显示
const form=reactive<OtherOutShowQuery>({
  pagesize:10,
  pageindex:1,
  number:'',
  keywords:'',
  start_time:null,
  end_time:null,
  organ_id:null,
  depot_id:null
})
const resetQuery=()=>{
form.pagesize=10
  form.pageindex=1
  form.number=''
  form.keywords=''
  form.start_time=null
  form.end_time=null
  form.organ_id=null
  form.depot_id=null
}
const pageShow=reactive({
totalCount:0,
totalPage:0
})

const tableData = ref([])
const getTableData = async () => {
form.start_time=value2.value[0]
form.end_time=value2.value[1]
console.log(value2)
console.log(form)
await GetOtherOutShow(form)
  .then(res => {
    console.log(res.data.data)
    tableData.value = res.data.data
    pageShow.totalCount=res.data.totalCount
    pageShow.totalPage=res.data.totalPage
  })
}
const handleSizeChange = (val: number) => {
form.pagesize=val
form.pageindex=0
getTableData()
}
const handleCurrentChange = (val: number) => {
form.pageindex=val
getTableData()
}
const changeQueryShow = (val:any) => {
  queryShow.value=val
}


const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
//删除
const handleDelete = (productvalue:any) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async() => {
    
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '操作取消',
    })
  })
}

//批量删除
const DeleteRange=()=>{
if(multipleSelection.value.length==0){
  ElMessage.error("至少选择一项删除")
  return
}
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async() => {
    
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '操作取消',
    })
  })
}

onMounted(()=>{
getTableData()
getSupplierList()
getWarehouseList()
})
</script>

<style scoped>
.el-row {
margin-bottom: 5px;
}
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}

.grid-content {
border-radius: 4px;
min-height: 36px;
}
.el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>